<template>
  <div class="rightTwo">
    <div class="title">
      <div class="titleImg"></div>
      <div>水</div>
    </div>
    <div class="list">
      <div class="item">
        <div id="water-charts1" class="echarts-wrap"></div>
        <div>
          <p>钱江源水源输出流量</p>
        </div>
      </div>
      <div class="item">
        <div id="water-charts2" class="echarts-wrap"></div>
        <div>
          <p>水库储水量</p>
        </div>
      </div>
      <div class="item">
        <div id="rate-charts1" class="echarts-wrap"></div>
        <div>
          <p>地表水优于I类比例</p>
        </div>
      </div>
      <div class="item">
        <div id="rate-charts2" class="echarts-wrap"></div>
        <div>
          <p>地表水优于II类比例</p>
        </div>
      </div>
      <div class="item">
        <div id="rate-charts3" class="echarts-wrap"></div>
        <div>
          <p>地表水优于III类比例</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echartsLiquidfill from "echarts-liquidfill";
export default {
  mounted() {
    let data = {
      chartsData: [0.4, 0.3],
      value: "680万m³",
    };
    let data1 = [
      {
        name: "使用中资源量",
        value: 1754,
        label: "13.25%",
      },
      {
        name: "维修中资源量",
        value: 611,
        label: "",
      },
    ];
    this.createCharts("water-charts1", "liquidFill", data);
    this.createCharts("water-charts2", "liquidFill", {
      chartsData: [0.6, 0.5],
      value: "8000万m³",
    });
    this.createCharts("rate-charts1", "pie", data1);
    this.createCharts("rate-charts2", "pie", [
      {
        name: "使用中资源量",
        value: 1754,
        label: "86.65%",
      },
      {
        name: "维修中资源量",
        value: 1480,
        label: "",
      },
    ]);
    this.createCharts("rate-charts3", "pie", [
      {
        name: "使用中资源量",
        value: 1754,
        label: "13.25%",
      },
      {
        name: "维修中资源量",
        value: 611,
        label: "",
      },
    ]);
   // this.draw1();
  },
  methods: {
    creatOptions(type, data) {
      if (type === "liquidFill") {
        return {
          series: [
            {
              type: "liquidFill",
              data: data.chartsData,
              radius: "83%",
              label: {
                normal: {
                  formatter: data.value,
                  fontSize: 15,
                  color:"#fff"
                },
              },
              backgroundStyle: {
                color: 'black', //背景颜色
              },
              outline: {
                borderDistance: 0,
                itemStyle: {
                  borderWidth: 5,
                  borderColor: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(65, 230, 236, 1)",
                      },
                      {
                        offset: 0.5,
                        color: "rgba(65, 230, 236, 1)",
                      },
                      {
                        offset: 1,
                        color: "rgba(65, 230, 236, 1)",
                      },
                    ],
                    globalCoord: false,
                  },
                  shadowBlur: 10,
                  shadowColor: "rgba(0,0,0,0)",
                },
              },
            },
          ],
        };
      } else {
        let arrName = getArrayValue(data, "name");
        let arrValue = getArrayValue(data, "value");
        let sumValue = eval(arrValue.join("+"));
        let objData = array2obj(data, "name");
        let optionData = getData(data);

        function getArrayValue(array, key) {
          var key = key || "value";
          var res = [];
          if (array) {
            array.forEach(function (t) {
              res.push(t[key]);
            });
          }
          return res;
        }

        function array2obj(array, key) {
          var resObj = {};
          for (var i = 0; i < array.length; i++) {
            resObj[array[i][key]] = array[i];
          }
          return resObj;
        }
        function getData(data) {
          var res = {
            series: [],
            yAxis: [],
          };
          for (let i = 0; i < data.length; i++) {
            res.series.push({
              name: "",
              type: "pie",
              clockWise: true, //顺时加载
              hoverAnimation: false, //鼠标移入变大
              radius: [80 - i * 15 + "%", 73 - i * 15 + "%"],
              center: ["50%", "50%"],
              label: {
                normal: {
                  show: true,
                  position: "center",
                  formatter: function () {
                    return data[i].label;
                  },
                  textStyle: {
                    fontSize: 15,
                    color: "#45F4F7",
                  },
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    fontSize: "30",
                    fontWeight: "bold",
                  },
                },
              },
              labelLine: {
                normal: {
                  show: false,
                },
              },
              itemStyle: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                borderWidth: 5,
              },
              data: [
                {
                  value: data[i].value,
                  name: data[i].name,
                },
                {
                  value: 1754 - data[i].value,
                  name: "",
                  itemStyle: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0,
                  },
                  tooltip: {
                    show: false,
                  },
                  hoverAnimation: false,
                },
              ],
            });
            res.series.push({
              name: "",
              type: "pie",
              silent: true,
              z: 1,
              clockWise: false, //顺时加载
              hoverAnimation: false, //鼠标移入变大
              radius: [73 - i * 15 + "%", 68 - i * 15 + "%"],
              center: ["30%", "55%"],
              label: {
                show: false,
              },
              itemStyle: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                borderWidth: 5,
              },
              data: [
                {
                  value: 7.5,
                  itemStyle: {
                    color: "rgba(3, 0, 0,0)",
                    borderWidth: 0,
                  },
                  tooltip: {
                    show: false,
                  },
                  hoverAnimation: false,
                },
                {
                  value: 2.5,
                  name: "",
                  itemStyle: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0,
                  },
                  tooltip: {
                    show: false,
                  },
                  hoverAnimation: false,
                },
              ],
            });
            res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + "%");
          }
          return res;
        }
        let option = {
          tooltip: {
            show: false,//鼠标移入不显示数值
            trigger: "item",
            formatter: "{a}<br>{b}:{c}({d}%)",
          },
          color: [
            "rgb(24, 183, 142)",
            "rgb(1, 179, 238)",
            "rgb(22, 75, 205)",
            "rgb(52, 52, 176)",
          ],
          xAxis: [
            {
              show: false,
            },
          ],
          series: optionData.series,
        };
        return option;
      }
    },
    createCharts(id, type, data) {
      let myChart = this.$echarts.init(document.getElementById(id));
      myChart.setOption(this.creatOptions(type, data));
      window.onresize = function () {
        myChart.resize();
      };
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '../../../assets/css/varibles.styl'
.rightTwo
  width vw(530)
  height vh(215)
  box-sizing border-box
  background url('/images/right2.png') no-repeat
  background-size cover
  background-size 100% 100%
  padding vh(20) 0 0 vh(30)
  .title
    display flex
    padding-bottom vh(10)
    font-size vw(18)
    .titleImg
      width vw(23)
      height vh(23)
      background url('/images/水.png') no-repeat
      background-size cover
      background-size 100% 100%
      margin-right vw(5)
  .list
    // width vw(300)
    // height vh(200)
    display flex
    flex-direction row
    flex-wrap wrap
    .item
      padding vh(10) vw(5)
    .echarts-wrap
      width vw(88)
      height vh(100)
    p
      font-size vw(14)
      margin-top vh(10)
      width vw(88)
      text-align center
</style>